import website from '/src/config/website.js'
import {useCommonStore} from "../store/modules/common.js";
import {useNavsStore} from "../store/modules/tags.js";
// Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：
// const modules = import.meta.glob('/src/views/system/**/*.vue')
// const modules = import.meta.glob('/src/views/system/*.vue')
// const modules = import.meta.glob('/src/views/systesm/user.vue')
// 全部找出来
// const modules = import.meta.glob(['../**/**/*.vue',])
// 数组形式的
const modules = import.meta.glob(['../views/**/*.vue', '../page/**/*.vue'])
//只找views目录下的文件
// const modules = import.meta.glob('../views/**/*.vue')


/***
 * 利用正则表达式判断字符串是否是url地址
 ****/
function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}

// const localStore = {...mapStores(useCommonStore, useNavsStore)}

let RouterPlugin = function () {
  this.$router = null;
}
RouterPlugin.install = function (option = {}) {
  this.$router = option.router;
  let i18n = option.i18n.global

  const commonStore = useCommonStore();
  const navsStore = useNavsStore();

  this.$router.$avueRouter = {
    // commonStore:  useCommonStore(),
    // navsStore:  useNavsStore(),
    $website: commonStore.website,
    routerList: [],
    group: '',
    meta: {},
    safe: this,

    /**
     * 生成标题，优先使用meta中的i18n字段。如果没有i18n，则取query的name字段或者item的label字段
     * @param item
     * @param props
     * @returns {*}
     */
    generateTitle: (item, props = {}) => {
      props = {
        path: 'path',
        label: 'name',
        children: 'children',
        meta: 'meta',
        iconDefault: 'icon-caidan',
        icon: 'icon',
        query: 'query',
        href: 'href',
      }
      // 先取meta中i8n属性
      let meta = item[props.meta || 'meta'] || {}
      let key = meta.i18n
      // console.log("key", key)
      if (key) {
        // $te方法判断需要翻译的key在你提供的语言包中是否存在
        const hasKey = i18n.te('route.' + key)
        if (hasKey) {
          return i18n.t('route.' + key)
        }
      }
      // 如果上面的meta.i18n不存在，则使用query.name属性
      // console.log("props.query", props.query)
      let query = item[props.query || 'query'] || {}
      // console.log("query" , query)
      // 先取query的name属性，如果没有取label属性
      let title = query.name || item[props.label || 'label']
      // console.log("title", title)

      return title
    },
    // 设置标题
    setTitle: (title) => {
      const defaultTitle = i18n.t('title');
      title = title ? `${title} | ${defaultTitle}` : defaultTitle;
      document.title = title;
    },
    /**
     *  关闭Tag
     *  原理：从tagList存储库中找到value对应的tag，然后调用DEL_TAG删除
     *
     * @param value
     */
    closeTag: (value) => {
      let tag = value || navsStore.tag;
      if (typeof value === 'string') {
        tag = navsStore.tagList.find(ele => ele.value === value)
      }
      navsStore.DEL_TAG(tag)
    },

    //处理路由
    // 如果包含http或者https，则使用iframe展示
    getPath: function (params) {
      let {src} = params;
      let result = src || '/';
      // 如果地址包括http或者https，使用myiframe来显示
      if (src.includes("http") || src.includes("https")) {
        result = `/myiframe/urlPath?${objToform(params)}`;
      }
      return result;
    },

    //正则处理路由
    vaildPath: function (list, path) {
      let result = false;
      list.forEach(ele => {
        if (new RegExp("^" + ele + ".*", "g").test(path)) {
          result = true
        }

      })
      return result;
    },
    //设置路由值
    // 获取路由信息
    getValue: function (route) {
      let value = "";
      if (route.query.src) {
        value = route.query.src;
      } else {
        value = route.path;
      }
      return value;
    },
    /**
     * 格式化动态路由
     * 主要作用就是生成componet组件
     * @param aMenu
     * @param first
     * @returns {[]}
     */
    formatRoutes: function (aMenu = [], first) {
      const aRouter = []
      // 系统级配置的菜单字段
      // 包括iconDefault、label、path、icon、children、query、href、meta
      const propsConfig = website.menu
      const propsDefault = {
        path: propsConfig.path || 'path',
        label: propsConfig.label || 'label',
        children: propsConfig.children || 'children',
        meta: propsConfig.meta || 'meta',
        iconDefault: propsConfig.iconDefault || 'Menu',
        icon: propsConfig.icon || 'icon',
        query: propsConfig.query || 'query',
        href: propsConfig.href || 'href'
      }
      // 如果入参aMenu属性为空，即没有传值。此时直接返回
      if (aMenu && aMenu.length === 0) {
        return [];
      }

      // 遍历aMenu的每一个对象
      // console.log("aMenu", aMenu)
      for (let i = 0; i < aMenu.length; i++) {
        const oMenu = aMenu[i];
        // console.log("omenu", oMenu)
        // step1 判断是否已经在本地路由列表routerList中
        if (this.routerList.includes(oMenu[propsDefault.path])) {
          // 此时什么也不做，返回
          return [];
        }
        // step2 处理第一个路由的index
        let path = (() => {
          // 如果是first，需要剔除路径中的/index
          console.log("oMenu", oMenu)
          if (first) {
            return oMenu[propsDefault.path].replace('/index', '')
          } else {
            return oMenu[propsDefault.path]
          }
        })();
        /**
         * 下面开始特殊处理组件
         */
            // step3 生成路径对应的component
            // 动态路由的时候使用，获取组件路径
            // let component = 'views' + oMenu.path;
        let component = `views${oMenu.path}`;
        // let component = 'views' + oMenu.path;
        let name = oMenu[propsDefault.label];
        // console.log("name", name)
        let icon = oMenu[propsDefault.icon];
        // console.log("icon", icon)
        let children = oMenu[propsDefault.children];
        // console.log("children", children)
        let query = oMenu[propsDefault.query];
        // console.log("query", query)
        let meta = oMenu[propsDefault.meta];
        // console.log("meta", meta)
        // 如果在install avue-router的时候，配置了keepAlive属性
        // 那么将使用install中的配置值覆盖oMenu中的属性值
        if (option.keepAlive) {
          meta.keepAlive = option.keepAlive
        }
        const hasChild = !!(children && children.length !== 0);
        // console.log("modules", modules)
        // console.log("modules component", component)
        // console.log("modules modules component1 ]" + component + ":com:", component)
        // console.log("modules modules component1 ]" + component + ":loc", '../' + component + '.vue')
        // // console.log("modules modules component1 ]" + component + ":res", modules[`../${component}.vue`])
        // console.log("modules modules component1 ]" + component + ":res", modules[`/src/views/system/user.vue`])
        /**
         * 下面就是配置oRouter，包括path、name、icon、meta、query、redirect、component、component
         * 以上顺序和在router中views和page中配置顺序一样
         */
        const oRouter = {
          path: path,
          name: name,
          icon: icon,
          meta: meta,
          query: query,
          redirect: (() => {
            // 设置默认路由
            // 如果没有子路由，同时是第一个，同时还不是url，此时redirect到 path/index
            if (!hasChild && first && !isURL(path)) {
              return `${path}/index`
            } else {
              return '';
            }
          })(),
          component: (() => {
            // 判断是否为首路由
            if (first) {
              return modules['../page/index/index.vue']
              // 判断是否为多层路由
            } else if (hasChild && !first) {
              //    "vite": "^2.4.4",
              return modules['../page/index/layout.vue']
              // require(['../page/index/layout'], resolve)
              // 判断是否为最终的页面视图
            } else {
              // require([`../${component}.vue`], resolve)
              // let result = modules[`../${component}.vue`]
              // for (const path in modules) {
              //   modules[path]().then((mod) => {
              //     console.log(path, mod)
              //   })
              // }
              // console.log("component1", component)
              // console.log("component1", `../${component}.vue`)
              let result = modules[`../${component}.vue`]
              if (result) {
                // console.log(component + '存在')
                result().then(mod => mod.default.name = path).catch(error=> {
                  console.log(component + error)
                })
              } else {
                console.log(component + '不存在')
              }
              // console.log("component1", result)
              // if (result) {
              //   result().then(mod => {
              //     console.log(component + '存在')
              //     mod.default.name = path
              //   }).catch(error => {
              //   })
              // } else {
              //   console.log(component + '不存在')
              // }

              return result
            }
          })(),
          // 处理是否为一级路由
          // 使用三目运算符计算。
          // 如果没有子路由，表示是最终的页面了，添加到component
          // 如果有子路由，继续执行formateRoutes，同时设置first为false
          children: !hasChild ? (() => {
            if (first) {
              if (!isURL(path)) {
                oMenu[propsDefault.path] = `${path}`;
              }
              oMenu[propsDefault.path] = `${path}`;
              let result = modules[`../${component}.vue`]
              if (result) {
                result().then(mod => mod.default.name = path)
              } else {
              }
              return [{
                path: 'index',
                name: name,
                component: result,
                meta: meta,
                icon: icon,
                query: query
              }]
            }
            return [];
          })() : (() => {
            return this.formatRoutes(children, false)
          })()
        }
        if (!isURL(path)) {
          aRouter.push(oRouter)
        }
      }

      // 上面的步骤做完后，aRouter表示最终的路由信息
      if (first) {
        aRouter.forEach((ele) => {
          if (!this.routerList.includes(ele[propsDefault.path])) {
            this.safe.$router.addRoute(ele)
            this.routerList.push(ele[propsDefault.path])
            // console.log("this.routerList", this.routerList)
          }
        })
      } else {
        // console.log("aRouter", aRouter)
        return aRouter
      }

    }
  }
}
/**
 * 格式化路径
 * action1: 不管是父路由，还是子路由。只要是网址，就使用iframeComponent加载
 * action2：如果没有子路由的父路由，在后面加上index
 * action3：其他情况，保持路由中的path不变
 *
 * @param ele
 * @param first
 */
export const formatPath = (ele, first) => {
  // 一个path路径默认的属性
  const propsDefault = website.menu;
  const icon = ele[propsDefault.icon];
  // 设置icon
  ele[propsDefault.icon] = !icon ? propsDefault.iconDefault : icon;
  // 设置meta
  ele.meta = ele.meta || {}

  const iframeComponent = 'components/iframe/main';
  const iframeSrc = (href) => {
    return href.replace(/&/g, "#")
  }

  // 判断是否有child
  const hasChild = !!(ele[propsDefault.children] && ele[propsDefault.children].length !== 0);
  // step1 如果没有child，手动将该对象的children置空
  if (!hasChild) {
    ele[propsDefault.children] = [];
  }
  /**
   * step2 如果没有child，并且是否第一个。
   * 此时就表示，第一个路径就没有子组件，那么实际上就是只有一个地址。那么此时直接展示即可。
   */
  if (!hasChild && first) {
    // 首先处理不是url的情况，即本地的组件
    ele[propsDefault.path] = ele[propsDefault.path] + '/index'
    // 如果是url，也就是iframe来加载
    if (isURL(ele[propsDefault.href])) {
      let href = ele[propsDefault.href]
      ele.component = iframeComponent
      ele[propsDefault.query] = {url: iframeSrc(href)}
    }
  } else {
    /**
     * step 3 如果不是第一个，或者是因为子组件的进来的。
     */
    ele[propsDefault.children] && ele[propsDefault.children].forEach(child => {
      // 如果是url，使用iframe来加载
      if (isURL(child[propsDefault.href])) {
        let href = child[propsDefault.href]
        child.component = iframeComponent
        child[propsDefault.query] = {url: iframeSrc(href)}
      }
      //note ‘${}' 是模板字符串，可以用来拼接多个变量
      // child[propsDefault.path] = `${ele[propsDefault.path]}/${child[propsDefault.path]}`
      // child[propsDefault.path] = `${ele[propsDefault.path]}`
      child[propsDefault.path] = `${child[propsDefault.path]}`
      formatPath(child);
    })
  }
}
export default RouterPlugin;
